<script setup>
import {ref, reactive, onMounted} from 'vue';
import {getShopListApi} from '@/service/shop.js';
import {ElMessage} from 'element-plus';
import CommonPagination from '@/components/pagination.vue';
// 引入添加、编辑门店的组件
import StoreAdd from './components/store-add.vue';
import StoreEdit from './components/store-edit.vue';
// 引入路由
import { useRouter } from 'vue-router';
const router = useRouter();
/* 引入ElementPlus */

// 分页
const pagination = reactive({
  page: 1,
  limit: 15,
  total: 0
})
const query = reactive({
  keyword: '',
});

const dataList = ref([]);
const fetchShopList = async () => {
  let params = {
    ...query,
    pagination
  };

  try {
    const response = await getShopListApi(params);
    if (response.code === 200) {
      dataList.value = response.data.list;
      pagination.total = response.data.pagination.total;
    } else {
      ElMessage.error(response.message);
    }
  } catch (error) {
    ElMessage.error('获取门店列表失败，请稍后重试');
  }
};



const handleSearch = () => {
  pagination.page = 1;
  fetchShopList();
};

// 添加门店信息
const addStoreRef = ref(null);
const showAddStoreView = () => {
  if (addStoreRef.value) {
    addStoreRef.value.showAddShopDrawer();
  }
};

// 编辑门店信息
const editStoreRef = ref(null);
const editStore = (row) => {
  if (editStoreRef.value) {
    editStoreRef.value.showEditShopDrawer(row);
  }
};

// 删除门店信息
const deleteStore = async (row) => {
  try {
    await ElMessageBox.confirm('确定要删除该门店吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
    
    try {
      // 假设有一个删除门店的API
      // await deleteShopApi(row.id);
      ElMessage.success('门店删除成功');
      fetchShopList(); // 重新加载列表
    } catch (error) {
      ElMessage.error('删除失败，请稍后重试');
    }
  } catch {
    // 用户取消删除操作
  }
};

const toHall = (row) => {
  // 跳转到厅列表页面，传递门店ID作为参数
  router.push({ name: 'StoreHall', query: { storeId: row.id } });
};

onMounted(() => {
  fetchShopList();
});
</script>

<template>
  <el-main>
    <div class="toolbar">
      <el-button type="danger" @click="showAddStoreView">新增门店</el-button>
      <el-input v-model="query.keyword" placeholder="请输入门店名称" @keyup.enter="handleSearch"/>
      <el-button type="primary" icon="search" @click="handleSearch">搜索</el-button>
    </div>
    <el-table :data="dataList" border class="list">
      <el-table-column prop="id" label="编号" width="55" align="center"/>
      <el-table-column prop="title" width="200" label="门店名称"/>
      <el-table-column prop="address" label="地址"/>
      <el-table-column label="厅">
        <template #default="{ row }">
          <el-link type="primary" @click="toHall(row)">{{ row.halls }}</el-link>
        </template>
      </el-table-column>
      <!-- 编辑、删除 -->
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button type="primary" @click="editStore(row)">编辑</el-button>
          <el-button type="danger" @click="deleteStore(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <CommonPagination :pagination="pagination" @fetch-list="fetchShopList"/>
    </div>

    <!-- 添加门店组件 -->
    <StoreAdd ref="addStoreRef" @reload="fetchShopList"/>
    <!-- 编辑门店组件 -->
    <StoreEdit ref="editStoreRef" @reload="fetchShopList"/>
  </el-main>
</template>

<style scoped>
/* 样式 */
</style>
